// src/App.tsx
import React from 'react';
// 引入tab切换标题点击切换内容
import Tabs from '../../public/Tabs.tsx';
import './End_tab.css';
// 引入自动轮播图
import Automatic from "../Automatic/Automatic.tsx"
// 引入点击箭头切换轮播图
import Arrow_carousel from '../Arrow_carousel/Arrow_carousel.tsx';

const End_tab: React.FC = () => {

    // 箭头切换轮播图片
    const images = [
        'https://s.ibaotu.com/next/img/new/p1.54be.png',
        'https://s.ibaotu.com/next/img/new/p2.420c.png',
        'https://s.ibaotu.com/next/img/new/p3.3f97.png',
        'https://s.ibaotu.com/next/img/new/p4.f74b.png',
        'https://s.ibaotu.com/next/img/new/p5.2c09.png',
        'https://s.ibaotu.com/next/img/new/p6.ba25.png'

    ];


    // 页尾tab切换标题
    const tabs = ['素材采购', '代理合作', '企业客户', '版权保障'];

    const contents = [
        // tab1
        <div key="1" className='first'>
            {/* tab1底下内容 */}
            <p className='orange'>如果您需要:采购企业vip或单个购买作品、API对接</p>
            <div className='scan'>
                <p>微信扫一扫</p>
                <p>客户经理为您服务</p>
                <img src="https://s.ibaotu.com/ibaotu/img/index/img_bottom_enter.png" alt="" />
                <p>(无需验证 扫码直接聊)</p>
            </div>
        </div>,


        // tab2
        <div key="2" className='two'>
                 {/* tab2底下内容 */}
            <dl>
                <dt>
                    <img src="https://s.ibaotu.com/next/img/new/combine.abd1.png" alt="" />
                </dt>
                <dd>
                    <p>包图网-国内领先的优质创意内容供给平台，汇集亿级精品素材、拥有顶尖在线编辑技术，具备完善的版权备案、授权体系。</p>
                    <hr className='orangehr' />
                    <h3 className='orange'>现开放模板素材、在线编辑技术对外代理合作</h3>
                    <p>如有需求请联系邮箱：</p>
                    <p>info@ibaotu.com</p>
                    <p>ruby.xiong@ibaotu.com</p>
                </dd>
            </dl>
        </div>,


        // tab3
        <div key="3" className='three'>
            <p className='orange'>加入包图企业VIP 与知名品牌为伍</p>
            {/* 自动轮播图 */}
            <div>
                <Automatic />
            </div>
            <div>
                <button>获取版权保障</button>
                <button>查看更多</button>
            </div>
        </div>,




        // tab4
        <div key="4" className='four'>
            <h2 className='orange'>在各行各业为版权护航</h2>
            <p>从业界巨头到初创团队，超过6万个优秀企业都在使用</p>
            <div className='click'>
                <ul>
                    <li>
                        <img src="https://s.ibaotu.com/next/img/new/g1.98da.png" alt="" />
                    </li>
                    <li>
                        <img src="https://s.ibaotu.com/next/img/new/g2.7749.png" alt="" />
                    </li>
                    <li>
                        <img src="https://s.ibaotu.com/next/img/new/g3.89e0.png" alt="" />
                    </li>
                    <li>
                        <img src="https://s.ibaotu.com/next/img/new/g4.2a53.png" alt="" />
                    </li>
                    <li>
                        <img src="https://s.ibaotu.com/next/img/new/g5.25b0.png" alt="" />
                    </li>
                    <li>
                        <img src="https://s.ibaotu.com/next/img/new/g6.1448.png" alt="" />
                    </li>
                </ul>
            </div>
            {/* 点击箭头切换轮播 */}
            <Arrow_carousel images={images} ></Arrow_carousel>
        </div>,
    ];

    return (
        <div className="App">
            {/* tab切换 */}
            <Tabs tabs={tabs} contents={contents} />

        </div>
    );
};

export default End_tab;
